<template>
  <div class="iot-dashboard">
    <!-- 顶部统计卡片 -->
    <div class="stats-grid">
      <div
        v-for="(stat, index) in stats"
        :key="index"
        class="stat-card"
        :style="`background: linear-gradient(135deg, ${stat.colorStart}, ${stat.colorEnd})`"
      >
        <div class="stat-content">
          <div class="stat-text">
            <span class="stat-value">{{ stat.value }}</span>
            <span class="stat-label">{{ stat.label }}</span>
          </div>
          <div class="stat-icon">
            <i :class="stat.icon"></i>
          </div>
        </div>
        <div class="stat-trend" v-if="stat.trend">
          <span :class="`trend-${stat.trend}`">
            <i :class="`el-icon-${stat.trend === 'up' ? 'top' : 'bottom'}`"></i>
            {{ stat.trendValue }}
          </span>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 设备状态图表 -->
      <div class="chart-container">
        <div class="chart-card">
          <h3><i class="el-icon-data-line"></i> 设备状态分布</h3>
          <div class="chart-placeholder">
            <div class="chart-legend">
              <div v-for="(item, index) in chartData" :key="index" class="legend-item">
                <span class="legend-color" :style="`background: ${item.color}`"></span>
                <span class="legend-label">{{ item.name }}: {{ item.value }}%</span>
              </div>
            </div>
            <div class="chart-visual">
              <div
                v-for="(item, index) in chartData"
                :key="index"
                class="chart-bar"
                :style="`height: ${item.value}%; background: ${item.color}`"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实时数据监控 -->
      <div class="monitor-container">
        <div class="monitor-card">
          <h3><i class="el-icon-monitor"></i> 实时数据监控</h3>
          <div class="data-stream">
            <div
              v-for="(item, index) in realtimeData"
              :key="index"
              class="data-item"
            >
              <span class="data-label"><i :class="item.icon"></i> {{ item.label }}:</span>
              <span class="data-value">{{ item.value }}</span>
              <span class="data-unit">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷操作 -->
<!--    <div class="quick-actions">-->
<!--      <el-button-->
<!--        v-for="(action, index) in quickActions"-->
<!--        :key="index"-->
<!--        :icon="action.icon"-->
<!--        @click="handleQuickAction(action)"-->
<!--      >-->
<!--        {{ action.label }}-->
<!--      </el-button>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "IotDashboard",
  data() {
    return {
      stats: [
        {
          label: "在线设备",
          value: "1,245",
          colorStart: "#4facfe",
          colorEnd: "#00f2fe",
          icon: "el-icon-connection",
          trend: "up",
          trendValue: "12%"
        },
        {
          label: "告警设备",
          value: "32",
          colorStart: "#f093fb",
          colorEnd: "#f5576c",
          icon: "el-icon-warning-outline",
          trend: "down",
          trendValue: "5%"
        },
        {
          label: "数据总量",
          value: "3.2TB",
          colorStart: "#43e97b",
          colorEnd: "#38f9d7",
          icon: "el-icon-data-board",
          trend: "up",
          trendValue: "24%"
        },
        {
          label: "今日消息",
          value: "2,134",
          colorStart: "#ff9a9e",
          colorEnd: "#fad0c4",
          icon: "el-icon-message",
          trend: "up",
          trendValue: "8%"
        }
      ],
      chartData: [
        { name: "运行中", value: 65, color: "#4facfe" },
        { name: "待机", value: 15, color: "#a0d911" },
        { name: "离线", value: 10, color: "#faad14" },
        { name: "故障", value: 10, color: "#f5222d" }
      ],
      realtimeData: [
        { label: "CPU使用率", value: "32", unit: "%", icon: "el-icon-cpu" },
        { label: "内存使用", value: "1.2", unit: "GB", icon: "el-icon-memory" },
        { label: "网络延迟", value: "24", unit: "ms", icon: "el-icon-link" },
        { label: "存储空间", value: "65", unit: "%", icon: "el-icon-harddisk" }
      ],
      quickActions: [
        { label: "添加设备", icon: "el-icon-plus", action: "addDevice" },
        { label: "设备管理", icon: "el-icon-setting", action: "manageDevices" },
        { label: "数据分析", icon: "el-icon-data-analysis", action: "dataAnalysis" },
        { label: "告警中心", icon: "el-icon-bell", action: "alarmCenter" }
      ]
    };
  },
  methods: {
    handleQuickAction(action) {
      switch(action.action) {
        case 'addDevice':
          this.$router.push('/device/add');
          break;
        case 'manageDevices':
          this.$router.push('/device/manage');
          break;
        // 其他操作处理...
      }
    }
  }
};
</script>

<style scoped lang="scss">
.iot-dashboard {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;

    .stat-card {
      border-radius: 8px;
      padding: 20px;
      color: white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
      }

      .stat-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .stat-text {
          .stat-value {
            font-size: 28px;
            font-weight: bold;
            display: block;
            margin-bottom: 8px;
          }

          .stat-label {
            font-size: 14px;
            opacity: 0.9;
          }
        }

        .stat-icon {
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          font-size: 24px;
        }
      }

      .stat-trend {
        margin-top: 12px;
        font-size: 12px;

        .trend-up {
          color: #67c23a;
        }

        .trend-down {
          color: #f56c6c;
        }
      }
    }
  }

  .main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    flex: 1;

    .chart-container, .monitor-container {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 16px;

      h3 {
        margin: 0 0 16px 0;
        color: #333;
        font-size: 16px;
        display: flex;
        align-items: center;

        i {
          margin-right: 8px;
          font-size: 18px;
        }
      }
    }

    .chart-placeholder {
      height: 300px;
      display: flex;

      .chart-legend {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .legend-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-right: 8px;
          }

          .legend-label {
            font-size: 14px;
            color: #666;
          }
        }
      }

      .chart-visual {
        flex: 2;
        display: flex;
        align-items: flex-end;
        gap: 10px;
        padding: 20px 0;

        .chart-bar {
          flex: 1;
          border-radius: 4px 4px 0 0;
          transition: height 0.5s ease;
          position: relative;

          &:after {
            content: attr(data-value);
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #333;
          }
        }
      }
    }

    .data-stream {
      .data-item {
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;

        &:last-child {
          border-bottom: none;
        }

        .data-label {
          flex: 1;
          color: #666;
          display: flex;
          align-items: center;

          i {
            margin-right: 8px;
            font-size: 16px;
          }
        }

        .data-value {
          font-weight: bold;
          color: #333;
          margin-right: 8px;
        }

        .data-unit {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }

  .quick-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;

    .el-button {
      flex: 1;
      padding: 12px;
    }
  }
}

@media (max-width: 992px) {
  .main-content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 576px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .quick-actions {
    flex-wrap: wrap;

    .el-button {
      min-width: calc(50% - 6px);
    }
  }

  .chart-placeholder {
    flex-direction: column !important;
    height: auto !important;

    .chart-visual {
      height: 200px;
      margin-top: 20px;
    }
  }
}
</style>
